<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>赛博朋克风按钮</title>
  <style>
    body{
      display: flex;
      width: 100vw;
      height: 100vh;
      margin:0;
      padding:0;
      justify-content: center;
      align-items: center;
      background-color: #F8F005;
      
    }
    button, button::after {
      width: 260px;
      height: 66px;
      font-size: 36px;
      font-weight: 400;
      background:linear-gradient(45deg, transparent 6%, #FF013C 6%);
      border: 0;
      color: #fff;
      /* letter-spacing: 2px; */
      line-height: 66px;
      cursor:pointer;
      outline:none;
      font-size: 24px;
      box-shadow: 6px 0 0 lightblue;
      position:relative;
    }
    button::after {
      --slice-0: inset( 50% 50% 50% 50%);
      --slice-1: inset( 80% -6px 0 0);
      --slice-2: inset( 50% -6px 30% 0);
      --slice-3: inset( 10% -6px 85% 0);
      --slice-4: inset( 40% -6px 43% 0);
      --slice-5: inset( 80% -6px 5% 0);
      content: 'AVAILABLE NOW';
      display: block;
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      /* background: #000; */
      background:linear-gradient(45deg, transparent 3%,#00E6F6 3%,#00E6F6 5%, #FF013C 6%);
      text-shadow:  -3px -3px 0 #F8F005, 3px 3px 0px #00E6F6;
      clip-path: var(--slice0);
      z-index:-1;
      /* transform: translate(-20px,10px); */
    }

    button:hover::after {
      animation: clip .6s linear;
      animation-timing-function: steps(2,end);
      
    }
    @keyframes clip {
      0% {
        clip-path: var(--slice-1);
        transform: translate(-20px,-10px);
        z-index: 1;
      }
      10% {
        clip-path: var(--slice-3);
        transform: translate(-0px,-5px);
      }
      20% {
        clip-path: var(--slice-2);
        transform: translate(-10px,-20px);
      }
      30% {
        clip-path: var(--slice-1);
        transform: translate(-0px,-10px);
      }
      40% {
        clip-path: var(--slice-5);
        transform: translate(-10px,5px);
      }
      50% {
        clip-path: var(--slice-0);
        transform: translate(5px,10px);
      }
      60% {
        clip-path: var(--slice-4);
        transform: translate(-0px,-10px);
      } 
      70% {
        clip-path: var(--slice-1);
        transform: translate(5px,-10px);
      }
      80% {
        clip-path: var(--slice-3);
        transform: translate(-5px,-20px);
      }
      90% {
        clip-path: var(--slice-0);
        transform: translate(5px,10px);
      }
      100% {
        clip-path: var(--slice-4);
        transform: translate(-10px,-20px);
        z-index: -1;
      }
    }
  </style>
</head>
<body>
  <button>AVAILABLE NOW</button>
</body>
</html>